<template>
  <div class="modify-dialog">
    <slot>
      <el-button size="small" type="primary" @click="showDialog()">
        新增材料
      </el-button>
    </slot>
    <el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible">
      <Form v-bind="formOpts" v-on="formEvent">
        <template #formBtn>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onConfirm"> 确 定 </el-button>
          </div>
        </template>
      </Form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ProductInput from "./ProductInput.vue";
import modifyMixins from "@/mixins/modifyMixins.vue";
export default {
  mixins: [modifyMixins],
  components: {
    ProductInput,
  },
  data() {
    return {
      dialogWidth: "600px",
      form: {
        materialId: {
          tag: "el-input",
          label: "材料编码",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入材料编码",
          },
        },
        materialName: {
          tag: "el-input",
          label: "材料名称",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入材料名称",
          },
        },
        norm: {
          tag: "el-input",
          label: "规格",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入规格",
          },
        },
        color: {
          tag: "el-input",
          label: "色号",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入色号",
          },
        },
        storeAverageUseCount: {
          tag: "el-input",
          label: "平均用量(店)",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入每家店铺平均使用数量",
          },
        },
        storeInventoryCount: {
          tag: "el-input",
          label: "可用店铺预警",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入预警店铺数量",
          },
        },
        unit: {
          tag: "el-input",
          label: "单位",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入单位",
          },
        },
        price: {
          tag: "el-input-number",
          label: "成本价",
          value: "",
          props: {
            min: 0,
            placeholder: "请输入成本价",
          },
        },
        salePrice: {
          tag: "el-input-number",
          label: "售价",
          value: "",
          props: {
            min: 0,
            placeholder: "请输入售价",
          },
        },
        classificationId: {
          tag: "el-select",
          label: "分类",
          value: "",
          items: [],
          props: {},
        },
        // limit: {
        //   tag: "el-input-number",
        //   label: "告警阈值",
        //   value: "",
        //   props: {
        //     min: 0,
        //     step: 1,
        //     stepStrictly: true,
        //     placeholder: "请输入告警阈值",
        //   },
        // },
        supplierId: {
          tag: "el-select",
          label: "供应商",
          value: "",
          items: [],
          props: {},
        },
      },
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    showDialog(modify = "add", row = {}) {
      // modify add为新增 edit为编辑
      this.dialogVisible = true;
      this.row = row;
      this.modify = modify || "add";
      //获取可分类和供应商下拉数据
      this.form.supplierId.items = this.$store.getters.supplierListItems;
      this.form.classificationId.items =this.$store.getters.categoryListItems;
      const keys = ["status"];
      // form参数
      for (const key in this.form) {
        let defValue = "";
        if (Array.isArray(this.form[key].value)) defValue = [];
        if (Object.hasOwnProperty.call(row, key))
          this.form[key].value = row[key];
        else this.form[key].value = defValue;
        this.form[key].hidden = false;
        if (modify == "add") this.form[key].hidden = keys.includes(key);
      }
      this.formKey = this.$quinn.guid();
     
    },
    onSubmit(form) {
      const { modify, row } = this;
      if (modify === "add")
        this.$api.materialMaterialAdd(form).then(this.submitDoneMsg);
      else if (["edit"].includes(modify))
        this.$api
          .materialMaterialUpdate({ ...form, materialId: row.materialId })
          .then(this.submitDoneMsg);
    },
  },
};
</script>

<style lang="less" scoped></style>
